<template>
    <view class="page">
        <!-- <NavBar title="云图AI"></NavBar> -->

        <!-- <image src="@/static/images/logo.png" class="logo"></image> -->

        <view class="banner">
            <swiper class="swiper" circular :autoplay="true" interval="6000" @change="changeBanner">
                <swiper-item v-for="(item, index) in bannerList" :key="index" :current="bannerIndex">
                    <image class="banner-item" :src="item.image" lazy-load="true">
                    </image>
                </swiper-item>
            </swiper>
        </view>
		
        <view class="dots">
            <view class="dots-item" v-for="(item, index) in bannerList" :key="index"
                :class="{ actived: index === bannerIndex }"></view>
        </view>

        <ColumnList @acceptColumn="changeColumn" />

        <view class="list">
            <view class="box" v-for="(item, index) in modelList" :key="item.id">
                <uv-image class="box-image" :src="item.cover" mode="aspectFill" lazyLoad
                    @click="selectModel(item, 'detail')" width="100%" height="100%"></uv-image>
                <view class="btn" @click="goDraw(item)">点击创作同款</view>
                <view class="name">
                    <image src="@/static/images/index-model-name-l.png" class="model-l"></image>
                    <view class="name-text">{{ item.name }}</view>
                    <image src="@/static/images/index-model-name-r.png" class="model-r"></image>
                </view>
                <view class="course" @click="selectModel(item, 'video')">
                    <uv-icon name="play-right-fill" color="#FFCB30" size="12"></uv-icon>
                    <view class="course-title">绘图教程</view>
                </view>
                <view class="box-message">
                    <view class="box-message-item">
                        <uv-icon class="icon" v-if="item.myCollect" name="heart-fill" color="#ffcb30" size="20"
                            @click="collectModel(index, false)"></uv-icon>
                        <uv-icon class="icon" v-if="!item.myCollect" name="heart-fill" color="#fff" size="20"
                            @click="collectModel(index, true)"></uv-icon>
                        <!-- <text class="text">{{ item.vcollectNum }}</text> -->
                    </view>
                    <!-- <view class="box-message-item">
                            <image v-if="!item.myLike" src="../../static/images/tabBar/icon_chuangzuo_02@2x.png">
                            </image>
                            <image v-else src="../../static/images/icon_bofangliang@2x.png"></image>
                            <text class="text">{{ item.vlikeNum }}</text>
                        </view> -->
                </view>
            </view>
            <uv-load-more bgColor="#000" marginTop='0' marginBottom='0' height="40"
                :status="hasMore ? 'loading' : 'noMore'" />
        </view>

        <PopupModelDetail :type="popupType" :onOff="popupOnOff" :detail="currentModel" @accept="acceptPopup" />

        <view class="wrap" ref="backTop" top="600">
            <text>滑动页面，返回顶部按钮将出现在右下角</text>
            <uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="{ 'background': '#fff' }"
                :iconStyle="{ 'fontWeight': '700', fontSize: '40rpx' }"></uv-back-top>
        </view>


    </view>
</template>

<script setup>
import {
    ref
} from 'vue';
import {
    apiGetModelList, apiCollectModel
} from '@/api/defaultApi.js'
import {
    apiBannerView
} from '@/api/systemApi.js'


import {
    onShow,
    onPullDownRefresh,
    onReachBottom,
    onPageScroll
} from '@dcloudio/uni-app';

// pinia
import {
    useModelStore
} from "@/stores/useModelStores.js"


// 获取pinia的数据
const modelStore = useModelStore()

// 模型列表相关
const categoryId = ref('')

const modelList = ref([])
const pageNo = ref(1)
const pageSize = ref(20)

// 是否还有更多
const hasMore = ref(true)

// 选择的模型
const currentModel = ref({})
const popupOnOff = ref(false)
const popupType = ref('detail')
const scrollTop = ref(0)

const bannerList = ref([])
const bannerIndex = ref(0)


// 选择模型分类
const changeColumn = (data) => {
    modelList.value = []
    pageNo.value = 1
    hasMore.value = true

    categoryId.value = data.id
    getModelList()
}

// 获取模型列表
const getModelList = async () => {
    let res = await apiGetModelList({
        pageNo: pageNo.value,
        pageSize: pageSize.value
    }, categoryId.value)
    modelList.value = modelList.value.concat(res.data.items)
    pageNo.value = res.data.page

    if (res.data.items.length < pageSize.value) hasMore.value = false

    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 300)
}

// 选择模型
const selectModel = (item, type) => {
    popupType.value = type
    currentModel.value = item
    popupOnOff.value = true
}

//获取banner
const getBanner = async () => {
    let res = await apiBannerView({
        category: '0002',
        limit: 5,
        platform: 'bjj'
    })

    bannerList.value = res.data
}

// 切换banner
const changeBanner = (e) => {
    bannerIndex.value = e.detail.current
}

//收藏模型
const collectModel = async (index, action) => {
    let res = await apiCollectModel({
        type: "collect",
        taskId: modelList.value[index].id,
        action: action ? "on" : "off"
    })
    modelList.value[index].myCollect = action
    modelList.value[index].vcollectNum = res.data.vcollectNum
}

// 接收弹窗
const acceptPopup = () => {
    popupOnOff.value = false
    currentModel.value = {}
}

const goDraw = (item) => {
    // console.log(JSON.stringify(item),'----item');
    // uni.setStorage({
    // 	key: 'model',
    // 	data: JSON.stringify(item),
    // 	success: function() {
    // 		console.log('成功？？？');
    // 		setTimeout(()=>{
    // 			uni.switchTab({
    // 				url: '/pages/draw/draw',
    // 			})
    // 		})
    // 	}
    // });
    modelStore.setModel(item)
    uni.switchTab({
        url: '/pages/draw/draw'
    })

}

// 下拉刷新
onPullDownRefresh(() => {
    modelList.value = []
    pageNo.value = 1
    hasMore.value = true

    getModelList()
})

// 触底
onReachBottom((e) => {
    pageNo.value++
    getModelList()
})

// 返回顶部
onPageScroll((e) => {
    scrollTop.value = e.scrollTop;
    // #ifdef APP-NVUE
    scrollTop.value = e.detail.scrollTop;
    // #endif
})

onShow(() => {
    getModelList()
    getBanner()
})
</script>

<style lang="scss" scoped>
.page {
    padding-top: 0;

    .logo {
        width: 80rpx;
        height: 22rpx;
        margin: 20rpx 0 20rpx 24rpx;
    }
}

.banner {
    width: 686rpx;
    height: auto;
    border-radius: 40rpx;
    overflow: hidden;
    margin: 32rpx auto 12rpx;

    .swiper,
    swiper {
        width: 100%;
        height: 494rpx;

        .banner-item {
            width: 100%;
            height: 100%;
        }
    }
}

.dots{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rpx;
    margin-bottom: 24rpx;
    .dots-item{
        width: 8rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: #999;
        margin-right: 8rpx;
        &::nth-last-child(1){
            margin-right: 0;
        }
        &.actived{
            background: #fff;
            width: 24rpx;
        }
    }
}

.list {
    width: 686rpx;
    margin: 0 auto 20rpx;
    background: #000;

    // overflow: hidden auto;
    .box {
        width: 100%;
        color: #fff;
        height: 514rpx;
        background: #999;
        position: relative;
        margin-bottom: 16rpx;
        border-radius: 20rpx;
        overflow: hidden;

        &:nth-last-of-type(1) {
            margin-bottom: 0;
        }

        .box-image {
            width: 100%;
            height: 514rpx;
        }

        .btn {
            width: 240rpx;
            height: 64rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 24rpx;
            right: 24rpx;
            color: #000;
            font-size: 28rpx;
            font-weight: bold;
            background: #ffcb30;
            border-radius: 15rpx;
        }

        .name {
            color: #080808;
            font-size: 32rpx;
            font-weight: 800;
            position: absolute;
            height: 68rpx;
            top: 0;
            left: 0;
            display: flex;

            .model-l {
                width: 26rpx;
                height: 100%;
            }

            .name-text {
                font-weight: 700;
                font-size: 28rpx;
                height: 100%;
                line-height: 28rpx;
                color: #fff;
                padding-top: 6rpx;
                background: url(@/static/images/index-model-name-c.png);
                background-size: 100% 100%;
            }

            .model-r {
                width: 50rpx;
                height: 100%;
            }
        }

        .course {
            background: rgba(3, 0, 0, 0.5);
            height: 40rpx;
            border-radius: 10rpx;
            padding: 0 20rpx;
            position: absolute;
            top: -5rpx;
            right: 24rpx;
            display: flex;
            align-items: center;

            .course-title {
                font-size: 20rpx;
                font-weight: 500;
                color: #fff;
                margin-left: 8rpx;
            }
        }

        .box-message {
            height: 20rpx;
            width: 300rpx;
            position: absolute;
            bottom: 48rpx;
            left: 24rpx;
            display: flex;
            margin-right: 24rpx;

            .box-message-item {
                display: flex;
                align-items: center;
                margin-right: 24rpx;

                .icon {
                    margin-right: 10rpx;
                }


                .text {
                    color: #fff;
                    font-size: 24rpx;
                    font-weight: 500;
                }
            }
        }
    }
}
</style>